<script lang="ts">
import _ from "lodash";
import { ref, reactive, defineComponent, watch } from "vue";
import { Search } from "@element-plus/icons-vue";

export interface ddd { }

export default defineComponent({
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Search,
  },
  props: {
    lists: {
      type: Object,
    },
    val: {
      type: String,
    }
  },
  emits: ["handleSearch", 'handleCheck'],

  setup(props, context) {
    const checkedList = ref(["one", "Sulution：", "Series："]);
    watch(() => props.val, (val: any) => {
      data.vals = val
    })

    let data = reactive({
      radio: "products",
      vals: props.val,
    })

    const handleShowCheck = (ind: any, item: any) => {
      if (checkedList.value.includes(item.label)) {
        checkedList.value.splice(
          checkedList.value.findIndex(
            (itemd: any) => itemd.label === item.label
          ),
          1
        );
      } else {
        checkedList.value = checkedList.value.concat(item.label);
      }
    };
    const activeNames = ref([1]);

    const handleSerch = _.debounce(() => {
      context.emit("handleSearch", data.vals);
    }, 500);

    const handleCheckList = (value: any) => {
      context.emit("handleCheck", value);
    };

    return {
      Search,
      handleSerch,
      checkedList,
      activeNames,
      handleShowCheck,
      handleCheckList,
      data
    };
  },
});
</script>

<template>
  <div class="bgfff series_check">
    <el-input class="w-50 m-2" placeholder="搜索" v-model="data.vals" @change="handleSerch" :prefix-icon="Search" />
    <div class="check_content" v-for="(itemVal, itemsKey, index) in lists" :key="index">
      <div class="check_line line_margin">
        <el-radio-group fill="#085DDE" text-color="#085DDE" @change="handleCheckList" v-model="data.radio" class="ml-4">
          <el-radio v-for="(citem, cind) in itemVal" :key="cind" :label="citem.type" :value="citem.type" size="large">
            <el-row>
              <el-col :span="22">{{ citem.label }}</el-col>
              <el-col :span="2"> {{ citem.value }}</el-col>
            </el-row>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #085DDE;
  background: #085DDE;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
  color: #085DDE;
}

.series_check {
  height: 100%;
  padding: 22px 18px;
  border-radius: 15px;

  .color4040 {
    color: #404040ff;
  }

  .color007 {
    color: $mainColor;
  }

  .checkMarTop {
    margin-top: -50px;
  }

  .checkTitleLine {
    width: 100%;
  }

  :deep(.el-collapse-item__arrow) {
    display: none;
  }

  :deep(.el-input__wrapper) {
    background-color: #f5f5f7ff;
  }

  :deep(.el-input .el-input__icon) {
    color: #404040ff;
  }

  :deep(.el-input__inner) {
    color: #404040ff;
  }

  :deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
    font-size: 16px;
    padding-left: 12px;
  }

  ::placeholder {
    color: #404040ff;
  }

  .check_content {
    margin-top: 17px;
    font-size: $text;
  }

  .check_title {
    margin: 20px 0 15px 0;
  }

  .line_margin {
    margin: 15px 0;
  }

  :deep(.check_line) {
    .el-radio-group {
      width: 100%;

      .el-radio {
        width: 100%;
        margin: 0 0 0 15px;
      }

      .el-radio__input {
        span {
          border-radius: 0;
        }
      }

      .el-radio__inner::after {
        border-radius: 0;

      }

      .el-radio__label {
        width: 100%;
      }
    }
  }

  .hide_div {
    height: 10px;
    overflow: hidden;
  }

  .auto_div {
    height: auto;
  }

  .check_label {
    padding-left: 12px;
  }
}

@media screen and (max-width: 768px) {
  .series_check {
    margin-bottom: 20px;
    width: 100%;

    :deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
      font-size: 14px;
      padding-left: 10px;
    }

    .line_margin {
      margin: 0;
    }
  }
}
</style>